<!DOCTYPE html>
<html>
  <head>
    <title><%= page_title %></title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1">
    <!--prettier-ignore-->
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

    <%= javascript_importmap_tags %>
  </head>

  <body>
    <div class="relative flex min-h-screen flex-col">
      <%= render 'layouts/shared/header' %>
      <div class="flex-1">
        <div class="border-b">
          <div
            class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
            <!--prettier-ignore-->
            <%= render 'layouts/shared/sidebar' %>
            <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
              <div class="mx-auto w-full min-w-0">
              <article class="documentation">
                <%= yield %>
              </article>
              </div>
            </main>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
